<template>
  <div class="about">
    <div class="book">
      <div class="dov">
        <div class="bar-title">
          <h1>{{ bar_title() }}</h1>
          <div class="pages-nav">
            {{ bar_page-1 }} / 1
          </div>
        </div>
        <div class="text">
          <span v-html="bar_text()">
          </span>
        </div>
        <div :class="bar_class()">
          <span :class="bar_left_class()" @click="bar_page--"></span>
          <span :class="bar_right_class()" @click="bar_page++"></span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bar_page: 1,
    }
  },
  methods: {
    bar_class() {
      if (this.bar_page == 1) {
        return "pages-bar r"
      }
      if (this.bar_page == 2) {
        return "pages-bar l"
      }
    },
    bar_left_class() {
      if (this.bar_page == 1) {
        return "left b"
      }
      if (this.bar_page == 2) {
        return "left"
      }
    },
    bar_right_class() {
      if (this.bar_page == 1) {
        return "right"
      }
      if (this.bar_page == 2) {
        return "right b"
      }
    },
    bar_title() {
      if (this.bar_page == 1) {
        return "关于我们"
      }
      if (this.bar_page == 2) {
        return "加入我们"
      }
    },
    bar_text() {
      if (this.bar_page == 1) {
        return "蛋白后宫制作团是从各个地方聚在一起的非盈利团队，只为“蛋白”提供游戏、我的世界地图等同人作品<br/><br/>作为一个非盈利团队，运营网站与服务器的成本是说高不高说低不低，但也因为是非盈利，所以不保证网站与服务器是否会持续运营，见谅..."
      }
      if (this.bar_page == 2) {
        return "如果你想要加入我们，可以到页面右上角进入QQ交流群，等待招聘公告，招募需求请看这里：<a href='https://docs.dbhg.top/dbhg/join/' target='_blank'>前往查看</a>"
      }
    }
  }
}

</script>

<style scoped lang="scss">
@font-face {
  font-family: "minecraft";
  src: url("@/assets/fonts/Minecraft.ttf");
}

.about {
  .dov {

    .bar-title {
      .pages-nav {
        display: flex;
        align-items: center;
        font-size: 14pt;
        height: 100%;

      }

      font-family: "minecraft";
      margin-top: 30px;
      text-align: center;
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: space-around;
      flex-direction: row;
    }

    .text {
      margin-top: 10px;
      overflow: auto;
      font-family: "minecraft";
      font-size: 14pt;
      width: 78%;
      height: 68%;
      display: flex;
      justify-content: start;
    }

    .pages-bar {
      .left {
        &:hover {
          cursor: pointer;
          background-image: url("@/assets/images/page_left_a.png");
          background-size: cover;
        }

        display: flex;
        width: 36px;
        height: 20px;
        background-image: url("@/assets/images/page_left.png");
        background-size: cover;
      }

      .right {
        &:hover {
          cursor: pointer;
          background-image: url("@/assets/images/page_right_a.png");
          background-size: cover;
        }

        display: flex;
        width: 36px;
        height: 20px;
        background-image: url("@/assets/images/page_right.png");
        background-size: cover;
      }

      .b {
        display: none;
      }

      display: flex;
      width: 65%;
    }

    .l {
      flex-direction: row;
      justify-content: flex-start;
    }

    .r {
      flex-direction: row;
      justify-content: flex-end;
    }


    display: flex;
    width: 100%;
    flex-direction: column;
    align-content: center;
    flex-wrap: nowrap;
    align-items: center;
  }

  .book {
    margin: 100px;
    display: flex;
    background-image: url("https://img.cdn.tencent-qq.cn/Yize/2023/05/fab195d21e205b89.png");
    background-position: top center;
    background-size: cover;
    width: 350px;
    height: 432px;
    -webkit-animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
    animation: scale-up-center 0.4s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
  }

  display: flex;
  justify-content: center;
  background-color: #eaeaea;
}

@media screen and (max-width: 800px) {
  .about {
    .book {
      margin: 10px;
      margin-top: 90px;
      background-size: cover;
      width: 357px;
      height: 432px;
      margin-bottom: 30px;
    }
  }
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background-color: rgba($color: #000000, $alpha: 0.2);
  /* 滚动条背景颜色 */
  border-radius: 12px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba($color: #409EFF, $alpha: 1.0);
  /* 滑块颜色 */
  border-radius: 12px;
}
</style>

